import React, { PureComponent } from "react";
import AxHeader from "components/AxHeader";
import AxFooter from "components/Footer";
import s from "./index.scss";
import { Flex , Toast} from "antd-mobile";
import phonePng from "assets/images/phone.png";
import yzm2Png from "assets/images/yzm2.png";
import jxSmall from "assets/images/jxSmall.png";
import {hashHistory} from 'React-Router'
import Icon from "antd/lib/Icon";
import {callApi} from "app/utils";


export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      phone: "",
      sms: "",
      tipStr:"获取短信验证码",
      isSend:false,
      sendStr:'重新发送(60)秒',
      timer:null,
      time:5,
      authCode:'',
      cardNo:'',
      authCode:''
   };
   this.handelCardNo = this.handelCardNo.bind(this)
   this.handelPhone = this.handelPhone.bind(this)
   this.handelSms = this.handelSms.bind(this)
   this.submitLogin = this.submitLogin.bind(this)
   this.clearValue = this.clearValue.bind(this)
   this.sendSms = this.sendSms.bind(this)
  }
  handelCardNo(event){
    console.log(event.target.value);
    this.setState({cardNo:event.target.value})
}
handelPhone(event) {
    console.log(event.target.value);
    this.setState({phone:event.target.value})
}
handelSms(event) {
  console.log(event.target.value);
  this.setState({sms:event.target.value})
}
sendSms(){
  if(this.yanzheng(2)==true){
    this.setState({
        isSend:true
      })
      
      var getMessageCodeSubmitData={mobile : this.state.phone, srvTxCode : "cardBindPlus",bindedCardno: this.state.cardNo,};
      callApi('/common/smsCode/apply',getMessageCodeSubmitData,"POST").then((data)=>{
        console.log(data)
        this.setState({
          authCode:data.data.authCode
        })
      })
    
      this.state.timer = setInterval(()=>{
        this.state.time--
        if(this.state.time==0){
          clearInterval( this.state.timer )
          this.setState({
            isSend:false,
            time:5,
          })
        }
        this.setState({
          sendStr:`重新发送(${this.state.time})秒`,
        })
       
      },1000)
  }
 
}

clearValue(e){
  if(e=='phone'){
    this.setState({phone:''})
  }
}


yanzheng(cur){
    if(cur==1){
        if(this.state.cardNo == ""){
            Toast.info('请填写银行卡号', 1);
            return false;
        }
        if(!(/^(\d{16,19})$/.test(this.state.cardNo))) {
            Toast.info('银行卡号格式不合法', 1);
            return false;
        }
        
        if(this.state.phone == ""){
            Toast.info('请填写手机号码', 1);
            console.log("请填写手机号码");
            return false;
        }
        if(!(/^1\d{10}$/.test(this.state.phone))) {
            Toast.info('手机号格式不正确', 1);
            console.log("手机号格式不正确");
            return false;
        }
        if(this.state.sms=="") {
            Toast.info('请填写验证码', 1);
            console.log("请填写验证码");
            return false;
        }
        return true
    }else{
        if(this.state.cardNo == ""){
            Toast.info('请填写银行卡号', 1);
            return false;
        }
        if(!(/^(\d{16,19})$/.test(this.state.cardNo))) {
            Toast.info('银行卡号格式不合法', 1);
            return false;
        }
        
        if(this.state.phone == ""){
            Toast.info('请填写手机号码', 1);
            console.log("请填写手机号码");
            return false;
        }
        if(!(/^1\d{10}$/.test(this.state.phone))) {
            Toast.info('手机号格式不正确', 1);
            console.log("手机号格式不正确");
            return false;
        }
        return true
    }
    
}

submitLogin(){
   if(this.yanzheng(1)==true){
        var submitData={mobile : this.state.phone, smsCode : this.state.sms,authCode:this.state.authCode,token:JSON.parse(localStorage.getItem("userData")).token,bindedCardNo:this.state.cardNo};
        callApi('/account/bankcard/bind',submitData,'POST').then((data)=>{
        if(data.success==true){
            hashHistory.push('/my/accountManage')
        }
        })
   }    
   
    
}

  componentDidMount() {
    this.setState({
        phone:JSON.parse(localStorage.getItem('userData')).mobile
    })
    
  }
  

  render() {
    let { phone , sms ,cardNo} = this.state
    return (
      <div className={`${s.userBindBankCardBox}`}>
        <div>
        <AxHeader />
        <Flex direction="column" className={`${s.formBox}`}>
        <Flex.Item className={`${s.item}`}>
            <span style={{display:"inline-block",width:"0.7rem",height:"0.5rem",textAlign: "left",lineHeight: "0.5rem"}}>银行卡</span>
            <input
              placeholder="请输入您要绑定的银行卡号"
              type="number"
              className={`${s.phone}`}
              value={cardNo}
              onChange={this.handelCardNo}
            />
           
          </Flex.Item>
          <Flex.Item className={`${s.tipBox}`}>注：该银行卡将用于快捷充值及提现操作</Flex.Item>
          <Flex.Item className={`${s.item}`}>
            <span style={{display:"inline-block",width:"0.7rem",height:"0.5rem",textAlign: "left",lineHeight: "0.5rem"}}>手机号</span>
            <input
              placeholder="请输入您的手机号"
              type="number"
              className={`${s.phone}`}
              value={phone}
              onChange={this.handelPhone}
            />
          </Flex.Item>

          <Flex.Item className={`${s.item}`}>
         
              <span style={{display:"inline-block",width:"0.7rem",height:"0.5rem",textAlign: "left",lineHeight: "0.5rem"}}>验证码</span>
                <input
                placeholder="请输入验证码"
                type="number"
                className={`${s.sms}`}
                value={sms}
                onChange={this.handelSms}
                />
            
            
                <div className={`${s.loginBtn2}`} style={{fontSize:'0.12rem',width:'1.25rem',display:this.state.isSend?'none':"block"}} onClick={this.sendSms}>{this.state.tipStr}</div>
                <div className={`${s.loginBtn2}`} style={{fontSize:'0.12rem',width:'1.25rem',display:this.state.isSend?'block':"none",backgroundColor:"rgba(70,161,251,.5)"}} >{this.state.sendStr}</div>
              
            
            
          </Flex.Item>
          <Flex.Item className={`${s.tipBox2}`} onClick={()=>{
              hashHistory.push('/my/rechargInfo')
          }}>查看支持绑定的银行列表和限额说明</Flex.Item>
          <Flex.Item className={`${s.tipBox3}`}><img src={jxSmall} />账户资金由江西银行存管</Flex.Item>
          <Flex.Item className={`${s.item}`} style={{padding:0}}>
            <div className={`${s.loginBtn}`} onClick={this.submitLogin}>确认</div>
          </Flex.Item>
          
        </Flex>
        
        </div>
        <AxFooter base={true} />
      </div>
    );
  }
}
